<template>
  <van-row
    class="winning-red-packet-wrap"
    :class="{ transtionend: isAccept }"
    :style="{
      width: !isAccept ? width : null,
      height: !isAccept ? height : null,
    }"
  >
    <van-row
      ref="redPacket"
      class="red-packet"
      :class="{
        'accept-red-packet': !isAccept,
        'accept-red-packet-x-y': isTransitionend,
      }"
      :style="{
        position: change ? 'absolute' : null,
        left: myLeft,
        top: myTop,
        transform: transformChange ? 'translate(-50%, -50%)' : null,
      }"
      @transitionend="transitionend"
    >
      <img class="red-packet-img" src="@/assets/image/car_paper.png" />

      <van-row
        class="position-info"
        type="flex"
        justify="center"
        align="center"
      >
        <!-- 中奖提示 -->
        <van-row
          type="flex"
          justify="center"
          align="center"
          class="winning-info"
        >
          <span>抽中了红包</span>
        </van-row>

        <!-- 中奖额度 -->
        <van-row type="flex" justify="center" class="winning-money-info">
          <span class="winning-money"> {{ money }}</span>
          <span class="winning-unit"> 元 </span>
        </van-row>

        <van-row class="withdraw"> 奖励将在5小时内到账 </van-row>
      </van-row>

      <!-- 收奖按钮 -->
      <van-row
        class="save-red-packet-btn"
        type="flex"
        justify="center"
        align="center"
        :style="{ visibility: !isAccept ? 'hidden' : 'visible' }"
      >
        <button @click="acceptRedPacket">
          <img src="@/assets/image/btn_collect.png" />
        </button>
      </van-row>
    </van-row>

    <!-- 邀请微信好友 -->
    <van-row
      class="invite-btn"
      type="flex"
      justify="center"
      align="center"
      :style="{ visibility: !isAccept ? 'hidden' : 'visible' }"
    >
      <button @click="inviteFriendDrawCard">
        <img src="@/assets/image/btn_friend.png" />
      </button>
    </van-row>
  </van-row>
</template>

<script>
export default {
  name: "WinningRedPacket",
  components: {},
  props: {
    money: { type: String, require: true },
    left: { type: Number, require: true },
    top: { type: Number, require: true },
    isAccept: { type: Boolean, require: true },
  },
  data() {
    return {
      isTransitionend: false,
      width: null,
      height: null,
      change: false,
      transformChange: false,
      count: 0,
    };
  },
  computed: {
    myLeft() {
      if (this.isTransitionend === true) return this.left + "px";
      else if (this.change == true) return "50%";
      else return null;
    },
    myTop() {
      if (this.isTransitionend === true) return this.top + "px";
      else if (this.change == true) return "50%";
      else return null;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.$refs.redPacket.$el.addEventListener(
      "transitionend",
      this.transitionend
    );
    this.width = this.$refs.redPacket.$el.clientWidth + "px";
    this.height = this.$refs.redPacket.$el.clientHeight + "px";
  },
  methods: {
    transitionend() {
      this.isTransitionend = true;
      this.count++;
      if (this.count === 4) {
        this.$emit("redPacketTransitionEnd");
        this.count = 0;
      }
    },
    acceptRedPacket() {
      this.change = true;
      this.transformChange = true;
      setTimeout(() => {
        this.$emit("acceptRedPacket");
        this.transformChange = false;
      }, 0);
    },
    inviteFriendDrawCard() {
      this.$emit("inviteFriendDrawCard");
    },
  },
};
</script>

<style scoped lang='less'>
.winning-red-packet-wrap {
  overflow: visible;
  &.transtionend {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .red-packet {
    position: relative;
    width: 264px;
    height: 362px;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: inherit;
      height: inherit;
    }
    &.accept-red-packet {
      transition: transform 0.5s;
      transform: translate(-50%, -50%) scale(0.2);
    }
    &.accept-red-packet-x-y {
      transition: all 0.8s;
      transform: translate(-50%, -50%) scale(0.2) rotate(360deg) scale(0) !important;
    }

    .position-info {
      width: 100%;
      flex-direction: column;
      position: absolute;
      top: 10%;
      // 中奖提示
      .winning-info {
        margin: 0 0 29px 0;
        span {
          font-size: 19px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffeac4;
          line-height: 27px;
        }
      }

      // 中奖信息
      .winning-money-info {
        width: fit-content;
        align-items: baseline;
        // 中奖额度
        .winning-money {
          font-size: 58px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffeac4;
          line-height: 82px;
          margin: 0 5px 0 0;
        }
        // 单位
        .winning-unit {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 17px;
          height: 17px;
          background: #ffffff;
          border-radius: 50%;
          font-size: 11px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ac232c;
          line-height: 15px;
        }
      }
      .withdraw {
        font-size: 11px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 15px;
      }
    }

    // 收奖按钮位置
    .save-red-packet-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 180px;
      bottom: 70px;
      button {
        width: inherit;
        img {
          width: inherit;
        }
      }
    }
  }

  .invite-btn {
    margin: 23px 0 0 0;
    button {
      img {
        width: 225px;
      }
    }
  }
}
</style>